<template>
	<uni-popup type="bottom" ref="refPopBank">
		<view class="bank-list">
			<view class="flex-between">
				<view class="ft28-gray" @click="close">取消</view>
				<view class="ft32-bold">{{headtext}}</view>
				<view class="ft28" @click="onConfirm">确定</view>
			</view>
			<view class="bank-search flex-center margin-t32">
				<input class="bank-input" type="text" v-model="keywords" placeholder="输入关键词搜索" />
				<view class="search-text" @click="onSearch">搜索</view>
			</view>
			<scroll-view class="picker-view" scroll-y="true">
				<view class="picker-item" v-for="item in range" :key="item[rangeKey]" @click="onSelect(item)"
				:class="item[rangeKey] == currentValues[rangeKey] ? 'active' : ''" >
					<view class="picker-item-text">
						{{item[rangeKey]}}
					</view>
					<view v-if="item[rangeKey] == currentValues[rangeKey]" class="picker-item-select">
						√
					</view>
				</view>
			</scroll-view>
			<!-- <picker-view class="picker-view" indicator-style="height: 50px;" :value="currentValues" @change="onChange">
				<picker-view-column>
					<view class="picker-item" v-for="(item,index) in rangeFilters" :key="index">
						{{item[rangeKey]}}
					</view>
				</picker-view-column>
			</picker-view> -->
		</view>
	</uni-popup>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		components: {
			uniPopup
		},
		props: {
			headtext:{
				type:String,
				default:''
			},
			range: {
				type: Array,
				default: []
			},
			rangeKey: {
				type: String,
				default: ''
			},
			defaultValues:{
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				currentValues:{},
				keywords:''
			}
		},
		created() {
			this.currentValues = this.defaultValues;
		},
		methods: {
			open() {
				this.$refs.refPopBank.open();
			},
			close() {
				this.$refs.refPopBank.close();
			},
			onSelect(data) {
				this.currentValues = data;
			},
			onConfirm(data) {
				this.$emit('onChange', this.currentValues);
				this.close();
			},
			onSearch() {
				this.$emit('onSearch', {keywords: this.keywords})
			}
		},
		watch: {
		    defaultValues(newValue) { 		      // 根据页面数据变化修改组件内部数据
		      this.currentValues = newValue;
		    }
		}
	}
</script>

<style lang="scss" scoped>
	view,input {
		box-sizing: border-box;
	}
	.flex-between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flex-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.ft32,.ft32-bold {
		font-size: 32rpx;
		color: #323233;
	}
	.ft32-bold {
		font-weight: bold;
	}

	.ft28 {
		font-size: 28rpx;
		color: #323232;
	}

	.ft28-gray {
		font-size: 28rpx;
		color: #969799;
	}

	.margin-t32 {
		margin-top: 32rpx;
	}

	.bank-list {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 26rpx 32rpx;

		.bank-search {
			.bank-input {
				padding: 16rpx;
				width: 606rpx;
				height: 72rpx;
				background: #F7F8FA;
				border-radius: 36rpx;
				font-size: 28rpx;
			}

			.search-text {
				margin-left: 16rpx;
				font-size: 32rpx;
				color: #323233;
			}
		}

		.picker-view {
			height: 700rpx;
			padding-top: 40rpx;
			.picker-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 15rpx 0;
				line-height: 40rpx;
				text-align: left;
				border-bottom: 1rpx solid #ebebeb;
				
				.picker-item-text,.picker-item-select {
					font-size: 32rpx;
					color: #323232;
				}
				
				&.active {
					.picker-item-text,.picker-item-select {
						color: red;
					}
				}
				
				&:last-child {
					border-bottom: none;
				}
			}
		}
	}
</style>